import React, { useEffect, useState } from 'react';
import DatePicker from 'react-datepicker';
import {
  Box,
  CloseArrow,
  Container,
  Grid,
  GridItem,
  HeroPortal,
  Input,
  MainButton,
  Progress,
  SimpleAccordion,
  Text,
} from '@nova-hf/ui';
import Wrapper from 'components/app-layout/Wrapper';
import { useRouter } from 'next/router';
import { useSnackbar } from 'notistack';
import {
  useCancelPortInMutation,
  usePortInQuery,
  useResendPortInMutation,
  useRetailLocationQuery,
  useUpdatePortInDateMutation,
} from 'typings/graphql';
import { formatDate } from 'utils/helpers';
import { useTranslation } from 'utils/i18n';
import { withStaff } from 'utils/with-staff';

const NumeraflutningurTilNova = withStaff(() => {
  const router = useRouter();
  const { enqueueSnackbar } = useSnackbar();

  const [portInDateTime, setPortInDateTime] = useState(new Date());
  const [canChangePortInDate, setCanChangePortInDate] = useState(false);
  const [cancelPortInReason, setCancelPortInReason] = useState('');
  const [showCancelPortInReasonError, setShowCancelPortInReasonError] = useState(false);

  const id = router.query.id as string;

  const [updatePortInDate] = useUpdatePortInDateMutation();
  const [cancelPortIn] = useCancelPortInMutation();
  const [resendPortIn] = useResendPortInMutation();

  const { t } = useTranslation('service');
  const onPrev = () => {
    router.back();
  };
  const { data, error } = usePortInQuery({
    variables: {
      input: {
        id,
      },
    },
  });

  const { data: retailData } = useRetailLocationQuery({
    variables: {
      input: {
        id: data?.portIn?.phoneNumber ?? '',
      },
    },
    skip: !data?.portIn.phoneNumber,
  });

  useEffect(() => {
    if (data?.portIn) {
      setPortInDateTime(data.portIn.portInDatetime);
    }
  }, [data]);

  if (error || !data) {
    return <Box>Villa</Box>;
  }
  const portIn = data.portIn;
  const isStepInactive = portIn?.portingStatusStep ? portIn?.portingStatusStep > 8 : false;

  const onPortingDateChange = (date: Date) => {
    setPortInDateTime(date);
    setCanChangePortInDate(true);
  };

  const changePortInDate = async () => {
    try {
      await updatePortInDate({
        variables: {
          input: {
            id,
            portInDate: portInDateTime,
          },
        },
        refetchQueries: ['portIn'],
      });

      enqueueSnackbar('Tókst', {
        variant: 'success',
      });
    } catch (e) {
      enqueueSnackbar('Villa kom upp', {
        variant: 'error',
      });
      return;
    }
  };

  const changePortInDateImmediately = async () => {
    try {
      const now = new Date();
      const threeSecondsLater = new Date(now.getTime() + 3000);
      const updatedPortInDateTime = threeSecondsLater.toISOString();
      await updatePortInDate({
        variables: {
          input: {
            id,
            portInDate: updatedPortInDateTime,
          },
        },
        refetchQueries: ['portIn'],
      });

      enqueueSnackbar('Tókst', {
        variant: 'success',
      });
    } catch (e) {
      enqueueSnackbar('Villa kom upp', {
        variant: 'error',
      });
      return;
    }
  };
  const cancel = async () => {
    if (cancelPortInReason.length <= 0) {
      setShowCancelPortInReasonError(true);
      return;
    }

    try {
      await cancelPortIn({
        variables: {
          input: {
            id,
            reason: cancelPortInReason,
          },
        },
        refetchQueries: ['portIn'],
      });

      enqueueSnackbar('Tókst', {
        variant: 'success',
      });
      setCancelPortInReason('');
    } catch (e) {
      enqueueSnackbar('Villa kom upp', {
        variant: 'error',
      });
      return;
    }
  };

  const resend = async () => {
    try {
      await resendPortIn({
        variables: {
          input: {
            id,
          },
        },
        refetchQueries: ['portIn'],
      });

      enqueueSnackbar('Tókst', {
        variant: 'success',
      });
      setCancelPortInReason('');
    } catch (e) {
      enqueueSnackbar('Villa kom upp', {
        variant: 'error',
      });
      return;
    }
  };

  return (
    <Wrapper header="none">
      <Container marginTop={10}>
        <HeroPortal
          color="pink"
          title="Númeraflutningur til Nova"
          breadcrumbs={[
            {
              href: '/staff',
              text: 'Leit',
            },
            {
              href: '/staff/numeraflutningar',
              text: 'Númeraflutningar',
            },
            {
              text: 'Númeraflutningur til Nova',
            },
          ]}
        />
        <Box display="flex" marginBottom={5}>
          <Box width="50%">
            <Grid gridTemplate={{ sm: 12 }} rowGap={{ sm: 2, lg: 3 }}>
              <GridItem gridColumn={{ sm: 'span5' }}>
                <Text variant="pSmallRegular">Númeraflutningur er</Text>
              </GridItem>
              <GridItem gridColumn={{ sm: 'span5' }}>
                <Text
                  renderAs="p"
                  variant="pMediumBold"
                  textAlign="right"
                  color={portIn.isActive ? 'green' : undefined}
                >
                  {portIn.isActive ? 'Virkur' : 'Óvirkur'}
                </Text>
              </GridItem>
              <GridItem gridColumn={{ sm: 'span5' }}>
                <Text variant="pSmallRegular">Símanúmer</Text>
              </GridItem>
              <GridItem gridColumn={{ sm: 'span5' }}>
                <Text renderAs="p" variant="pMediumBold" textAlign="right">
                  {portIn.phoneNumber}
                </Text>
              </GridItem>
              <GridItem gridColumn={{ sm: 'span5' }}>
                <Text variant="pSmallRegular">Kennitala rétthafa</Text>
              </GridItem>
              <GridItem gridColumn={{ sm: 'span5' }}>
                <Text renderAs="p" variant="pMediumBold" textAlign="right">
                  {portIn.nationalId}
                </Text>
              </GridItem>

              <GridItem gridColumn={{ sm: 'span5' }}>
                <Text variant="pSmallRegular">Rétthafi</Text>
              </GridItem>
              <GridItem gridColumn={{ sm: 'span5' }}>
                <Text renderAs="p" variant="pMediumBold" textAlign="right">
                  {portIn.fullName}
                </Text>
              </GridItem>

              <GridItem gridColumn={{ sm: 'span5' }}>
                <Text variant="pSmallRegular">Skráð dags</Text>
              </GridItem>
              <GridItem gridColumn={{ sm: 'span5' }}>
                <Text renderAs="p" variant="pMediumBold" textAlign="right">
                  {formatDate(portIn.createdOn, 'd. MMM yyyy HH:mm')}
                </Text>
              </GridItem>

              <GridItem gridColumn={{ sm: 'span5' }}>
                <Text variant="pSmallRegular">Flutningsdagsetning</Text>
              </GridItem>
              <GridItem gridColumn={{ sm: 'span5' }}>
                <Text renderAs="p" variant="pMediumBold" textAlign="right">
                  {formatDate(portIn.portInDatetime, 'd. MMM yyyy HH:mm')}
                </Text>
              </GridItem>

              <GridItem gridColumn={{ sm: 'span5' }}>
                <Text variant="pSmallRegular">Númer beiðni</Text>
              </GridItem>
              <GridItem gridColumn={{ sm: 'span5' }}>
                <Text renderAs="p" variant="pMediumBold" textAlign="right">
                  {portIn.requestId ?? '-'}
                </Text>
              </GridItem>

              <GridItem gridColumn={{ sm: 'span5' }}>
                <Text variant="pSmallRegular">Fráfarandi fyrirtæki</Text>
              </GridItem>
              <GridItem gridColumn={{ sm: 'span5' }}>
                <Text renderAs="p" variant="pMediumBold" textAlign="right">
                  {portIn.donor}
                </Text>
              </GridItem>

              <GridItem gridColumn={{ sm: 'span5' }}>
                <Text variant="pSmallRegular">Móttakandi fyrirtæki</Text>
              </GridItem>
              <GridItem gridColumn={{ sm: 'span5' }}>
                <Text renderAs="p" variant="pMediumBold" textAlign="right">
                  {portIn.receiver}
                </Text>
              </GridItem>

              <GridItem gridColumn={{ sm: 'span5' }}>
                <Text variant="pSmallRegular">Hver á næsta skref</Text>
              </GridItem>
              <GridItem gridColumn={{ sm: 'span5' }}>
                <Text renderAs="p" variant="pMediumBold" textAlign="right">
                  {portIn.responsibleCompany}
                </Text>
              </GridItem>

              <GridItem gridColumn={{ sm: 'span5' }}>
                <Text variant="pSmallRegular">Navision staða</Text>
              </GridItem>
              <GridItem gridColumn={{ sm: 'span5' }}>
                <Text renderAs="p" variant="pMediumBold" textAlign="right">
                  {portIn.isProcessedInSalesSystem
                    ? 'Afgreitt'
                    : `Óafgreitt @ ${retailData?.retailLocation?.posUsername || 'Finnst ekki'}`}
                </Text>
              </GridItem>
            </Grid>
          </Box>
          <Box width="50%">
            <Box>
              <Text>Staða númeraflutnings:</Text>
              <Progress
                length={8}
                current={isStepInactive ? 0 : portIn.portingStatusStep}
                color="pink"
                steps={[
                  'Drög',
                  'Til afgreiðslu',
                  'Staðfest',
                  'Til afhendingar',
                  'Afhending',
                  'Afhent',
                  'Móttekið',
                  'Lokið',
                ]}
                isFull
                highestStep={isStepInactive ? 0 : 8}
              />
              <CloseArrow dark onClick={onPrev} />
            </Box>
            {portIn.isActive && (
              <>
                <Box paddingBottom={2}>
                  <SimpleAccordion
                    color="pink"
                    title="Breyta flutningsdagsetningunni"
                    icon="history"
                  >
                    <Box padding={2}>
                      {portIn.portingStatusStep > 4 ? (
                        <Text marginTop={3} color="black100" variant="pMediumRegular">
                          {t('portIn.portingStatusStep')}
                        </Text>
                      ) : (
                        <Grid rowGap={4} columnGap={4}>
                          <GridItem gridColumn={{ sm: '1/12' }}>
                            <Box marginBottom={25}>
                              <Text color="black100" variant="pMediumRegular">
                                Breyttu flutningsdagsetningunni hér:{' '}
                              </Text>
                              <DatePicker
                                selected={new Date(portInDateTime)}
                                onChange={(date: Date) => onPortingDateChange(date)}
                                minDate={new Date()}
                                name="PortalDatePicker"
                                locale="is"
                                dropdownMode="scroll"
                                dateFormat="dd. LLL yyyy hh:mm"
                                timeFormat="HH:mm"
                                showTimeSelect
                              />
                            </Box>
                          </GridItem>
                          <GridItem gridColumn={{ sm: '1/12', md: '1/12', lg: '7/12' }}>
                            <MainButton
                              text={'Breyta'}
                              isDisabled={!canChangePortInDate}
                              onClick={() => changePortInDate()}
                            />
                          </GridItem>
                        </Grid>
                      )}
                    </Box>
                  </SimpleAccordion>
                </Box>
                <Box paddingBottom={2}>
                  <SimpleAccordion color="pink" title="Flytja strax!" icon="zap">
                    <Box padding={2}>
                      {portIn.portingStatusStep > 4 ? (
                        <Text marginTop={3} color="black100" variant="pMediumRegular">
                          {t('portIn.portingStatusStep')}
                        </Text>
                      ) : (
                        <Grid rowGap={4} columnGap={4}>
                          <GridItem gridColumn={{ sm: '1/12' }}>
                            <Box marginBottom={5}>
                              <Text marginTop={3} color="black100" variant="pMediumRegular">
                                {t('portIn.confirm')}
                              </Text>
                            </Box>
                          </GridItem>
                          <GridItem gridColumn={{ sm: '1/12', md: '5/12', lg: '7/12' }}>
                            <MainButton
                              text={'Flytja strax, takk!'}
                              onClick={() => changePortInDateImmediately()}
                            />
                          </GridItem>
                        </Grid>
                      )}
                    </Box>
                  </SimpleAccordion>
                </Box>
                <Box paddingBottom={2}>
                  <SimpleAccordion color="pink" title="Hætta við númeraflutning" icon="close">
                    <Box padding={2}>
                      {portIn.portingStatusStep > 4 ? (
                        <Text>
                          Ekki er hægt að hætta við númeraflutning. Númeraflutningur er kominn í
                          stöðu sem býður ekki lendur uppá þessa breytignu
                        </Text>
                      ) : (
                        <Grid rowGap={4} columnGap={4}>
                          <GridItem gridColumn={{ sm: '1/12' }}>
                            <Input
                              id="cancelPortIn"
                              label="Ástæða"
                              name="Cancel reason"
                              type="text"
                              required
                              value={cancelPortInReason}
                              message="Sláðu inn ástæðu fyir því að verið er að hætta við númeraflutning"
                              onChange={(e) => setCancelPortInReason(e.target.value)}
                              inputStatus={showCancelPortInReasonError ? 'error' : undefined}
                            />
                          </GridItem>
                          <GridItem gridColumn={{ sm: '1/12', md: '1/12', lg: '7/12' }}>
                            <MainButton
                              text={'Breyta'}
                              isDisabled={cancelPortInReason.length <= 0}
                              onClick={() => cancel()}
                            />
                          </GridItem>
                        </Grid>
                      )}
                    </Box>
                  </SimpleAccordion>
                </Box>
              </>
            )}
            {portIn.isAllowedToResend && (
              <Box paddingBottom={2}>
                <SimpleAccordion color="pink" title="Endursenda númeraflutning" icon="refresh">
                  <Box padding={2}>
                    <Grid rowGap={4} columnGap={4}>
                      <GridItem gridColumn={{ sm: '1/12' }}>
                        <Text>
                          Með því að endursenda númeraflutning verður til nýtt
                          númeraflutningsbeiðni.
                        </Text>
                      </GridItem>
                      <GridItem gridColumn={{ sm: '1/12', md: '1/12', lg: '7/12' }}>
                        <MainButton text={'Endursenda'} onClick={() => resend()} />
                      </GridItem>
                    </Grid>
                  </Box>
                </SimpleAccordion>
              </Box>
            )}
          </Box>
        </Box>
      </Container>
    </Wrapper>
  );
});

NumeraflutningurTilNova.getInitialProps = () => {
  return {
    namespacesRequired: ['staff'],
  };
};

export default NumeraflutningurTilNova;